<<<<<<< HEAD
=======
<template>
  <div>
		<el-button type="text" @click="dialogVisible = true">新增</el-button>
		
		<el-table
		:data="tableData"
		border
		style="width: 100%">
		<el-table-column
		  prop="mer_id"
		  label="编号"
		  width="180">
		</el-table-column>
		<el-table-column
		  prop="mer_shopname"
		  label="商品名称"
		  width="180">
		</el-table-column>
		<el-table-column
		  prop="mer_classify"
		  label="分类">
		</el-table-column>
		<el-table-column
		  prop="mer_people"
		  label="录入人">
		</el-table-column>
		<el-table-column
		  prop="mer_time"
		  label="录入时间">
		</el-table-column>
		<el-table-column
		  prop="mer_state"
		  label="状态">
		</el-table-column>
	  </el-table>
		
		<el-dialog
		  :visible.sync="dialogVisible"
		  width="30%"
		  :before-close="handleClose">
		  <span>
			<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="商品信息" name="first">
				
				<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
				来源门店&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<el-select v-model="value1"  placeholder="请选择" @change="getshop">
					<el-option
					  v-for="item in options"
					  :key="item.shopId"
					  :label="item.shopName"
					  :value="item.shopId">
					</el-option>
				</el-select></br>
				商品分类一级
				<el-select v-model="value2" placeholder="请选择" id="select1" @change="getselect" >
					<el-option
					  v-for="item in options1"
					  :key="item.bigclassName"
					  :label="item.bigclassName"
					  :value="item.bigclassId">
					</el-option>
				</el-select>
				二级
				<el-select v-model="value3" placeholder="请选择" id="select1"  @change="getsmall">
					<el-option
					  v-for="item in options2"
					  :key="item.smallclassName"
					  :label="item.smallclassName"
					  :value="item.smallclassId">
					</el-option>
				</el-select></br>
				  <el-form-item label="商品名称">
					<el-input v-model="formShop.name" width="50px"></el-input>
				  </el-form-item>
				  商品品牌
				  <el-select v-model="value4" placeholder="请选择" id="select1" @change="getbrand" >
					<el-option
					  v-for="item in options3"
					  :key="item.value"
					  :label="item.brandName"
					  :value="item.brandId">
					</el-option>
					</el-select></br>
				  <el-form-item label="商品首买价">
					<el-input v-model="formShop.price"></el-input>
				  </el-form-item>
				  <el-form-item label="商品描述">
					<el-input v-model="formShop.des"></el-input>
				  </el-form-item>
				</el-form>
				
			</el-tab-pane>
			<el-tab-pane label="商品属性" name="second">配置管理</el-tab-pane>
			<el-tab-pane label="商品图片" name="third">
				
				
				
			</el-tab-pane>
			</el-tabs>
		  </span>
		  <span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="save" >保存</el-button>
		  </span>
		</el-dialog>
		<el-upload
      action="http://localhost:8080/file/upload"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :with-credentials="isCredentials"
      :on-remove="handleRemove" :on-success="ok">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
  
</template>

<script>
	import axios from 'axios'
	let _this;
    export default {
        name: "Demo",
		data(){
			return{
				dialogVisible: false,
				activeName: 'second',
				labelPosition: 'right',
				//新增商品的表单数据
				formShop: {
				  name: '',
				  price: '',
				  des: '',
				},
				dialogImageUrl: '',
				dialogVisible: false,
				isCredentials:true,
				options:[],
				value1:'请选择',
				options1:[],
				value2:'请选择',
				options2:[],
				value3:'请选择',
				options3:[],
				value4:'请选择',
				bigId:'',
				myoption:'',
				shopInfo:{
					shopId:'',
					shopName:'',
					bigId:'',
					bigName:'',
					smallId:'',
					smallName:'',
					brandId:'',
					brandName:'',
					merName:'',
					merPrice:'',
					merDes:'',
				},
				tableData:'',
			}
		},
		
	mounted(){
			_this=this;
			_this.getshopname();
			_this.getbigClass();
			_this.getbrand();
			_this.getMer();
		},
	methods:{
		//添加的方法
		add:function(){
			
		},
		handleClick(tab, event){
				console.log(tab, event);
			  },
		handleClose(done) {
			this.$confirm('确认关闭？')
			  .then(_ => {
				done();
			  })
			  .catch(_ => {});
		  },
		//获取所有门店的方法
		getshopname:function(){
			axios.post("http://192.168.40.37:8080/add/getshopName").then(function (result) {
			_this.options=result.data.data
			})
		},
		//获取所有商品大类的方法
		getbigClass:function(){
			axios.post("http://192.168.40.37:8080/add/getbigClass").then(function (result) {
			_this.options1=result.data.data;
			})
		},
		//根据大类查询出所有商品小类的方法
		  getsmallClass:function(){
				axios.post("http://192.168.40.37:8080/add/getsmallClass",{"bigId":_this.bigId}).then(function (result) {
				_this.options2=result.data.data;
			})
			},
		//获取大类id
		getselect(index){
			_this.bigId=index;
			_this.getsmallClass();
			
		},
		getshop(index){
			_this.shopInfo.shopId=index;
		},
		getsmall(index){
			_this.shopInfo.smallId=index;
		},
		getbrand(index){
			_this.shopInfo.brandId=index;
		},
		//获取商品品牌
		getbrand(){			
			axios.post("http://192.168.40.37:8080/add/getBrand",).then(function (result) {
				_this.options3=result.data.data;
			})
		},
		//保存商品的方法
		save(){										
			_this.shopInfo.shopName=_this.options[0].shopName;
			_this.shopInfo.bigId=_this.bigId;
			_this.shopInfo.bigName=_this.options1[0].bigclassName;
			_this.shopInfo.smallName=_this.options2[0].smallclassName;
			_this.shopInfo.brandName=_this.options3[0].brandName;
			_this.shopInfo.merName=_this.formShop.name;
			_this.shopInfo.merPrice=_this.formShop.price;
			_this.shopInfo.merDes=_this.formShop.des;
			console.log(_this.shopInfo);
			axios.post("http://192.168.40.37:8080/add/addMer",{"shopInfo":_this.shopInfo}).then(function (result) {
				alert("新增成功!");
				_this.getbigClass();
				_this.getMer();
			})
		},
		getMer(){
			axios.post("http://192.168.40.37:8080/add/getMer").then(function (result) {
				_this.tableData=result.data.data;
			})
		},
		handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
	  ok(response,file,filelist){
		console.log(response);
	  }
	}
   }
</script>

<style scoped>
	.selectyyyyy{
		position:relative;
		right:100px!implements;
		width:50px;
	}
</style>
>>>>>>> 564cb3439b12c0d6c6e94cc9696755800258e5da
